<template>
  <div class="banner-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">宣传标识牌横幅制作流程</h2>
        <div class="process-status">
          <el-tag type="info">当前步骤：{{ currentStepInfo.title }}</el-tag>
          <el-tag type="warning" v-if="formData.bannerType === 'urgent'">加急制作</el-tag>
        </div>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(step, index) in processSteps" 
                 :key="index" 
                 :title="step.title"
                 :description="step.shortDesc"
                 @click.native="goToStep(index)">
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <el-card class="current-step-info" shadow="hover">
          <template v-if="currentStepInfo">
            <div class="step-header">
              <h3>
                <i :class="currentStepInfo.icon"></i>
                {{ currentStepInfo.title }}
              </h3>
              <p class="description">{{ currentStepInfo.description }}</p>
            </div>
            
            <div class="step-actions">
              <el-form v-if="currentStepInfo.formItems" 
                      :model="formData"
                      :rules="rules"
                      ref="stepForm" 
                      label-width="120px"
                      class="step-form">
                <el-row :gutter="20">
                  <el-col :span="12" v-for="(item, index) in currentStepInfo.formItems" 
                         :key="index"
                         :class="{ 'full-width': item.type === 'textarea' || item.type === 'upload' }">
                    <el-form-item :label="item.label"
                                :prop="item.prop"
                                :required="item.required"
                                :class="{ 'is-required': item.required }">
                      <el-input v-if="item.type === 'input'" 
                               v-model="formData[item.prop]"
                               :type="item.inputType || 'text'"
                               :placeholder="item.placeholder">
                        <template v-if="item.unit" slot="append">{{ item.unit }}</template>
                      </el-input>
                      <el-select v-else-if="item.type === 'select'"
                                v-model="formData[item.prop]"
                                :placeholder="item.placeholder"
                                :multiple="item.multiple">
                        <el-option v-for="option in item.options"
                                 :key="option.value"
                                 :label="option.label"
                                 :value="option.value">
                        </el-option>
                      </el-select>
                      <el-date-picker v-else-if="item.type === 'date'"
                                    v-model="formData[item.prop]"
                                    :type="item.dateType || 'date'"
                                    :placeholder="item.placeholder"
                                    value-format="yyyy-MM-dd">
                      </el-date-picker>
                      <el-input v-else-if="item.type === 'textarea'"
                               type="textarea"
                               v-model="formData[item.prop]"
                               :rows="item.rows || 4"
                               :placeholder="item.placeholder">
                      </el-input>
                      <el-upload v-else-if="item.type === 'upload'"
                                class="upload-demo"
                                action="#"
                                :auto-upload="false"
                                :on-change="handleFileChange"
                                :file-list="fileList">
                        <el-button size="small" type="primary">选择文件</el-button>
                        <div slot="tip" class="el-upload__tip">{{ item.tip }}</div>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              
              <div class="step-tips" v-if="currentStepInfo.tips">
                <h4>
                  <i class="el-icon-warning-outline"></i>
                  注意事项：
                </h4>
                <ul>
                  <li v-for="(tip, index) in currentStepInfo.tips" :key="index">
                    <i class="el-icon-check"></i>
                    {{ tip }}
                  </li>
                </ul>
              </div>
              
              <div class="button-group">
                <el-button v-if="currentStep > 0" 
                          @click="prevStep"
                          icon="el-icon-arrow-left"
                          size="medium">上一步</el-button>
                <el-button type="primary" 
                          @click="nextStep"
                          :loading="submitting"
                          :disabled="!canProceed"
                          size="medium">
                  <i :class="currentStep === processSteps.length - 1 ? 'el-icon-check' : 'el-icon-arrow-right'"></i>
                  {{ currentStep === processSteps.length - 1 ? '完成' : '下一步' }}
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </div>

    <div class="process-progress">
      <div class="progress-info">
        <span>流程进度：</span>
        <el-progress :percentage="(currentStep + 1) / processSteps.length * 100" 
                    :format="format"
                    status="success"></el-progress>
      </div>
      <div class="step-count">
        <span>当前步骤：{{ currentStep + 1 }}/{{ processSteps.length }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BannerProcess',
  data() {
    const validateNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入数字'))
      } else if (isNaN(value)) {
        callback(new Error('请输入有效数字'))
      } else {
        callback()
      }
    }

    return {
      currentStep: 0,
      formData: {},
      fileList: [],
      submitting: false,
      rules: {
        bannerType: [{ required: true, message: '请选择制作类型', trigger: 'change' }],
        purpose: [{ required: true, message: '请输入制作用途', trigger: 'blur' }],
        size: [{ required: true, message: '请输入尺寸要求', trigger: 'blur' }],
        quantity: [
          { required: true, message: '请输入数量', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        approvers: [{ required: true, message: '请选择审批人', trigger: 'change' }]
      },
      processSteps: [
        {
          title: '需求信息',
          shortDesc: '填写需求',
          icon: 'el-icon-edit-outline',
          description: '填写宣传标识牌/横幅制作需求信息',
          formItems: [
            {
              type: 'select',
              label: '制作类型',
              prop: 'bannerType',
              placeholder: '请选择制作类型',
              required: true,
              options: [
                { label: '宣传标识牌', value: 'signboard' },
                { label: '横幅条幅', value: 'banner' },
                { label: '展示展板', value: 'display' },
                { label: '指示牌', value: 'guide' }
              ]
            },
            {
              type: 'input',
              label: '制作用途',
              prop: 'purpose',
              placeholder: '请输入制作用途',
              required: true
            },
            {
              type: 'input',
              label: '尺寸要求',
              prop: 'size',
              placeholder: '请输入尺寸要求',
              required: true
            },
            {
              type: 'input',
              inputType: 'number',
              label: '制作数量',
              prop: 'quantity',
              placeholder: '请输入制作数量',
              required: true
            },
            {
              type: 'select',
              label: '材质选择',
              prop: 'material',
              placeholder: '请选择材质',
              required: true,
              options: [
                { label: 'PVC板', value: 'pvc' },
                { label: '亚克力', value: 'acrylic' },
                { label: '不锈钢', value: 'stainless_steel' },
                { label: '布料', value: 'fabric' }
              ]
            },
            {
              type: 'upload',
              label: '参考图片',
              prop: 'referenceImage',
              tip: '请上传参考图片（JPG/PNG格式）'
            }
          ],
          tips: [
            '明确制作用途和场景',
            '准确填写尺寸要求',
            '选择合适的材质',
            '提供清晰的参考图片'
          ]
        },
        {
          title: '设计要求',
          shortDesc: '设计细节',
          icon: 'el-icon-picture',
          description: '填写设计要求和细节',
          formItems: [
            {
              type: 'select',
              label: '设计方式',
              prop: 'designMethod',
              placeholder: '请选择设计方式',
              required: true,
              options: [
                { label: '自行设计', value: 'self' },
                { label: '供应商设计', value: 'supplier' },
                { label: '现有设计改版', value: 'modify' }
              ]
            },
            {
              type: 'textarea',
              label: '设计要求',
              prop: 'designRequirement',
              placeholder: '请详细描述设计要求',
              rows: 4,
              required: true
            },
            {
              type: 'select',
              label: '配色要求',
              prop: 'colorScheme',
              placeholder: '请选择配色要求',
              multiple: true,
              options: [
                { label: '企业标准色', value: 'corporate' },
                { label: '活动主题色', value: 'theme' },
                { label: '自定义配色', value: 'custom' }
              ]
            },
            {
              type: 'upload',
              label: '设计文件',
              prop: 'designFile',
              tip: '请上传设计文件（AI/PSD/CDR格式）'
            }
          ],
          tips: [
            '注意设计规范要求',
            '确保配色符合标准',
            '提供完整设计素材',
            '说明特殊设计要求'
          ]
        },
        {
          title: '制作安装',
          shortDesc: '制作细节',
          icon: 'el-icon-s-operation',
          description: '制作和安装相关要求',
          formItems: [
            {
              type: 'select',
              label: '安装方式',
              prop: 'installMethod',
              placeholder: '请选择安装方式',
              required: true,
              options: [
                { label: '壁挂式', value: 'wall' },
                { label: '立柱式', value: 'pillar' },
                { label: '悬挂式', value: 'hanging' },
                { label: '桌面式', value: 'desktop' }
              ]
            },
            {
              type: 'date',
              label: '期望完成',
              prop: 'expectedDate',
              placeholder: '请选择期望完成日期',
              required: true
            },
            {
              type: 'textarea',
              label: '安装说明',
              prop: 'installNote',
              placeholder: '请输入安装位置和特殊要求',
              rows: 4
            },
            {
              type: 'upload',
              label: '现场照片',
              prop: 'sitePhoto',
              tip: '请上传安装现场照片'
            }
          ],
          tips: [
            '确认安装环境条件',
            '注意安全施工要求',
            '预留安装时间',
            '准备必要辅材'
          ]
        },
        {
          title: '审批确认',
          shortDesc: '审批流程',
          icon: 'el-icon-s-check',
          description: '制作审批流程',
          formItems: [
            {
              type: 'select',
              label: '审批人',
              prop: 'approvers',
              placeholder: '请选择审批人',
              required: true,
              multiple: true,
              options: [
                { label: '部门主管', value: 'department_manager' },
                { label: '行政主管', value: 'admin_manager' },
                { label: '分管领导', value: 'supervisor' }
              ]
            },
            {
              type: 'input',
              inputType: 'number',
              label: '预算金额',
              prop: 'budget',
              placeholder: '请输入预算金额',
              required: true,
              unit: '元'
            },
            {
              type: 'textarea',
              label: '备注说明',
              prop: 'remarks',
              placeholder: '请输入其他补充说明',
              rows: 4
            }
          ],
          tips: [
            '确保预算合理性',
            '准备报价单据',
            '说明紧急程度',
            '注意审批时效'
          ]
        }
      ]
    }
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep]
    },
    canProceed() {
      return true // 实际应用中需要根据表单验证结果返回
    },
    format(percentage) {
      return percentage === 100 ? '完成' : `${percentage}%`
    }
  },
  methods: {
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    async nextStep() {
      try {
        await this.$refs.stepForm.validate()
        if (this.currentStep < this.processSteps.length - 1) {
          this.currentStep++
        } else {
          await this.completeProcess()
        }
      } catch (error) {
        this.$message.error('请正确填写所有必填项')
        return false
      }
    },
    async completeProcess() {
      this.submitting = true
      try {
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$message.success('宣传标识牌横幅制作流程已完成')
        this.$router.push('/main/process')
      } catch (error) {
        this.$message.error('提交失败，请重试')
      } finally {
        this.submitting = false
      }
    },
    handleFileChange(file, fileList) {
      const isValidFormat = (file.name.endsWith('.jpg') || 
                           file.name.endsWith('.png') || 
                           file.name.endsWith('.pdf') || 
                           file.name.endsWith('.doc') || 
                           file.name.endsWith('.docx') ||
                           file.name.endsWith('.ai') ||
                           file.name.endsWith('.psd') ||
                           file.name.endsWith('.cdr'))
      const isLt20M = file.size / 1024 / 1024 < 20

      if (!isValidFormat) {
        this.$message.error('文件格式不正确！')
        return false
      }
      if (!isLt20M) {
        this.$message.error('文件大小不能超过 20MB！')
        return false
      }
      this.fileList = fileList.slice(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.banner-process {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 40px);

  .header {
    margin-bottom: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
    
    .header-content {
      position: relative;
      text-align: center;

      .back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: none;
        color: #606266;
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          color: #409EFF;
        }

        i {
          margin-right: 5px;
          font-size: 16px;
        }
      }

      .page-title {
        margin: 0;
        font-size: 24px;
        color: #303133;
        font-weight: 600;
      }

      .process-status {
        margin-top: 10px;
        
        .el-tag {
          margin: 0 5px;
        }
      }
    }
  }

  .process-timeline {
    margin-bottom: 30px;
  }

  .process-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  }

  .current-step-info {
    margin-bottom: 20px;

    .step-header {
      margin-bottom: 10px;

      h3 {
        margin: 0;
        font-size: 18px;
        color: #303133;
        font-weight: 600;

        i {
          margin-right: 5px;
          font-size: 20px;
        }
      }

      p.description {
        margin: 5px 0 0 0;
        font-size: 14px;
        color: #606266;
      }
    }

    .step-actions {
      .step-form {
        .el-row {
          margin-bottom: 20px;
        }

        .el-col {
          &.full-width {
            width: 100%;
          }
        }

        .el-form-item {
          &.is-required {
            .el-form-item__label:after {
              content: '*';
              color: #f56c6c;
              margin-left: 4px;
            }
          }
        }
      }

      .step-tips {
        margin-bottom: 20px;

        h4 {
          margin: 0 0 10px 0;
          font-size: 16px;
          color: #303133;
          font-weight: 600;
        }

        ul {
          margin: 0;
          padding-left: 20px;

          li {
            margin-bottom: 5px;
            font-size: 14px;
            color: #606266;

            i {
              margin-right: 5px;
              font-size: 16px;
            }
          }
        }
      }

      .button-group {
        text-align: right;
      }
    }
  }

  .process-progress {
    margin-top: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);

    .progress-info {
      margin-bottom: 20px;
    }

    .step-count {
      text-align: right;
    }
  }
}
</style> 